<template>
    <view class="my">
        <view class="user_base">
            <view class="left">
                <image :src="userInfo.avatar || '../../static/icon/banner.png'" />
                <text>{{ userInfo.nickName || '微信用户' }}</text>
            </view>
            <view class="right" @click="goUserInfo">
                <text>去完善信息</text>
                <image src="../../static/icon/right.png"></image>
            </view>
        </view>

        <view class="links">
            <u-cell-group>
                <u-cell url="/pkg-house/home/home" :border="false" isLink title="我的房屋">
                    <image class="left-icon" slot="icon" src="../../static/icon/myhouse.png" />
                </u-cell>
                <u-cell url='/pkg-house/Myrepair/Myrepair' :border="false" isLink title="我的报修">
                    <image class="left-icon" slot="icon" src="../../static/icon/myrepair.png" />
                </u-cell>
                <u-cell :border="false" isLink title="访客记录">
                    <image class="left-icon" slot="icon" src="../../static/icon/myfriends.png" />
                </u-cell>
            </u-cell-group>
        </view>

        <u-button type="primary" text="退出账号" @click="logout"></u-button>
        <!-- 退出确认模态框 -->
        <!-- <u-modal showCancelButton :show="show" title="享+生活" content='是否确认退出账号？' @cancel="onCancel" @confirm="onConfirm">
		</u-modal> -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false
            }
        },
        computed: {
            userInfo() {
                return this.$store.state.user.userInfo
            }
        },
        methods: {
            logout() {
                // this.show = true
                uni.showModal({
                    title: '享+生活',
                    content: '确认退出账号？',
                    confirmText: '退出',
                    success: (res) => {
                        if (res.confirm) {
                            this.$store.commit('user/setUserToken', null)
                            uni.removeStorageSync('userToken')
                            uni.navigateTo({
                                url: "/pages/login/login"
                            })
                        }
                    }
                })
            },
            onLoad() {
                this.$store.dispatch('user/loadUserInfo')
            },
            goUserInfo() {
                uni.navigateTo({
                    url: "/pages/userInfo/userInfo"
                })
            }
            // onCancel() {
            // 	// this.show = false
            // },
            // onConfirm() {
            // 	this.$store.commit('user/setUserToken', null)
            // 	uni.removeStorageSync('userToken')
            // 	this.show = false
            // 	uni.redirectTo({
            // 		url: "/pages/login/login"
            // 	})
            // }
        }
    }
</script>

<style lang="scss" scoped>
    .my {
        height: 100%;
        background-color: #FAFAFA;

        .user_base {
            width: 750rpx;
            height: 482rpx;
            padding: 128rpx 40rpx 0px 40rpx;
            border-radius: 0px 0px 60px 60px;
            background: #6394C0;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;

            .left {
                height: 80rpx;
                display: flex;
                align-items: center;

                image {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                }

                text {
                    color: #fff;
                    font-size: 40rpx;
                    margin-left: 20rpx;
                }
            }

            .right {
                height: 80rpx;
                display: flex;
                align-items: center;

                text {
                    color: #fff;
                    font-size: 28rpx;
                    margin-right: 10rpx;
                }

                image {
                    width: 32rpx;
                    height: 32rpx;
                }
            }
        }

        .links {
            width: 670rpx;
            height: 306rpx;
            background-color: #fff;
            border-radius: 16rpx;
            margin: 0 auto;
            margin-top: -136rpx;

            ::v-deep .u-cell__body {
                padding: 0 25rpx;
                height: 102rpx;

                .u-cell__title-text {
                    color: #3C3E42 !important;
                    font-size: 28rpx !important;
                }
            }

            .left-icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 25rpx;
            }
        }

        ::v-deep .u-button {
            width: 670rpx;
            margin: 25rpx auto;
            background-color: #6394C0;
            border: none;
        }
    }
</style>
